<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>MuLinson.Bolo</title>
	<link rel="stylesheet" type="text/css" href="style/reset.css">
	<link rel="stylesheet" type="text/css" href="style/main.css">
	<link rel="stylesheet" type="text/css" href="style/font-awesome.min.css">
</head>
<body>
	<div class="main_wrapper">
		<header>
			<nav>
				<div class="logo">
					<a href="#">
						<img src="img/logo.jpg" alt="">
						<div class="user_info">
							<p>博主：黄枫（21 | 女）</p>
							<p>现就读于沈阳师范大学 · 本科 · 计算机科学与技术</p>
							<p>目标：成为一名优秀的前端攻城狮</p>
						</div>
					</a>				   
				</div>
				<div class="logo_name">
					<span>木林森小小姐</span>
				</div>
				<ul>
					<li><a href="#" class="current">MuLinson</a></li>				
					<li><a href="log.html">日志</a></li>
					<li><a href="mood.html">芯情</a></li>
					<li><a href="time.html">沙漏</a></li>
					<li><a href="../index.html">HOME</a></li>
				</ul>
			</nav>
			<div id="banner">
				<div class="inner">
					<h1>MULINSON</h1>
					<h5>
						 Hi!欢迎来到木林森小小姐的个人博客
					</h5>
					<button>了解我</button>
					<span><i class="fa fa-angle-double-down fa-2x"></i></span>
					<div class="more" id="more"><a href="javascript:;">更多</a></div>
				</div>
			</div>
		</header>
		<div class="container">
			<section class="first_section">
				<div class="wrapper">
					<div>
						<h2>MuLinson</h2>
						<div class="hr"></div>
						<p>
							MuLinson是我给自己的博客起的昵称，中文音译叫木林森，象征枝繁叶茂的寓意，同时也是希望自己能够不断地努力成长。
						</p>
						<p>
							博客还在完善中，动画效果会在空闲时间里慢慢去完成，因为最近小木有点忙/(ㄒoㄒ)/~~
						</p>
					</div>
					<div class="icon_group">
						<span><i class="fa fa-tags fa-2x"></i></span>
						<span><i class="fa fa-book fa-2x"></i></span>
						<span><i class="fa fa-key fa-2x"></i></span>
					</div>
				</div>
			</section>
			<section class="second_section">
				<div class="article_preview" id="more_info">
					<div class="img_section">
						<img src="img/pic01.jpg" alt="">
					</div>
					<div class="text_section">
						<div>
							<h2>关于写博客的初衷</h2>
							<p>
								原因一是小木是程序猿，原因二是小木是程序猿呐，原因三还是小木是程序猿啊（以上都是开玩笑的啦）咳咳咳...接下来说正经的，小木的博客除了写自己的日志和心情外，也会把自己平时遇到的前端技术难点和攻克方法分享给大家，虽然小木的能力有限，但还是希望可以帮助到那些正在朝着前端努力的小伙伴们。
							</p>
							<p>
								小木想把自己所学的东西应用在生活中，把它作为生活中的一部分去享受，而不是仅仅的只是为了工作，为了工作而去学习的话，大概真的会变成真正的[码农]吧
							</p>
						</div>
					</div>
				</div>
				<div class="article_preview">
					<div class="text_section">
						<div>
							<h2>关于自己</h2>
							<p>
								大三的学习生涯已经结束了，而现在的自己已经是大四预备的老学姐了，好哀怨的赶脚，岁月真是一把杀猪刀啊
							</p>
							<p>
								现在的自己去回首过去的时光，小木大概只想吐槽自己：那时的你是猪吗？（没有想法，迷茫到不知道做些什么，能很顺畅完成的大概只剩下睡觉和吃饭了），尽管如此，小木还是很感谢曾经的自己作出的不经意的选择---加入了学校的工作室，慢慢地成长到现在的自己，并不是为现在的自己比曾经学到了多少知识和技能而窃喜，而是慢慢的走进了自己，找到了了自己喜欢并努力的方向。尽管有时还是会迷茫，迷茫自己到底能成长到什么地步，到底能不能胜任这份工作,自己当初的选择是不是对的。可是仔细想想这些迷惑都是归咎于自己在某些问题上处理不好而产生的自我价值的否定，所以就会逼自己鼓起劲地往前跑，直到出现的问题都一一消灭了，让自己重新回到那个平衡点。
							</p>
							<p>
								有时候，生活的漫不经心可能比百分之百的肯定还让人惊喜。
							</p>
						</div>
					</div>
					<div class="img_section">
						<img src="img/pic02.jpg" alt="">
					</div>
				</div>
				<div class="article_preview">
					<div class="img_section">
						<img src="img/pic03.jpg" alt="">
					</div>
					<div class="text_section">
						<div>
							<h2>送给自己的三句话</h2>
							<p>
								<strong>First:</strong>&nbsp;&nbsp;无论何时何地，都不要停止学习
							</p>
							<p>
								<strong>Second:</strong>&nbsp;&nbsp;不停地做梦，然后去实现梦
							</p>
							<p>
								<strong>Third:</strong>&nbsp;&nbsp;你的一切源于爱和信仰，不可辜负
							</p>
						</div>
					</div>
				</div>
			</section>
			<section class="thirsd_section">
				<div class="wrapper">
					<div class="header_wrapper">
						<h2>小标题</h2>
					    <div class="hr"></div>
					    <p>
					    	span span span span span span span span span span span span span
					    </p>
					</div>
					<div class="card_group">
						<div class="card">
							<h3>小标题</h3>
							<p>
								span span span span span span span span span span span span span
							</p>
						</div>
						<div class="card">
							<h3>小标题</h3>
							<p>
								span span span span span span span span span span span span span
							</p>
						</div>
						<div class="card">
							<h3>小标题</h3>
							<p>
								span span span span span span span span span span span span span
							</p>
						</div>
						<div class="card">
							<h3>小标题</h3>
							<p>
								span span span span span span span span span span span span span
							</p>
						</div>
						<div class="card">
							<h3>小标题</h3>
							<p>
								span span span span span span span span span span span span span
							</p>
						</div>
						<div class="card">
							<h3>小标题</h3>
							<p>
								span span span span span span span span span span span span span
							</p>
						</div>
					</div>
				</div>
			</section>
		</div>
		<footer>
			<div class="footer_wrapper"></div>
			<div class="footer_info">
				<ul>
					<li>
						<a href="#">
							<i class="fa fa-heart fa-2x"></i>
						</a>
					</li>
					<li>
					<a href="#">
						<i class="fa fa-github-square fa-2x"></i>
					</a>
					</li>
					<li>
						<a href="#">
							<i class="fa fa-qq fa-2x"></i>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="fa fa-gift fa-2x"></i>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="fa fa-smile-o fa-2x"></i>
						</a>
					</li>
				</ul>
			</div>
		</footer>
	</div>
</body>
<script>
	var more_btn = document.getElementById("more");
	var more_info = document.getElementById("more_info");
	var timer = null;
	more_btn.onclick = function () {
		
		timer = setInterval( function () {
			var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
			var speed = (more_info.offsetTop - scrollTop)/2;
			speed = Math.ceil(speed);
			document.documentElement.scrollTop = document.body.scrollTop = scrollTop + speed;
		},100 );		
	}
	
	window.onscroll = function () {
		var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
		if(more_info.offsetTop == scrollTop) {
			clearInterval(timer);
		}
	}
</script>
</html>